<template>
  <view class="uv-safe-bottom" :style="[style]" :class="[!isNvue && 'uv-safe-area-inset-bottom']"> </view>
</template>

<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
/**
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @tutorial https://www.uvui.cn/components/safeAreaInset.html
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <uv-status-bar></uv-status-bar>
 */
export default {
  name: 'uv-safe-bottom',
  mixins: [mpMixin, mixin],
  data() {
    return {
      safeAreaBottomHeight: 0,
      isNvue: false,
    }
  },
  computed: {
    style() {
      const style = {}
      // #ifdef APP-NVUE || MP-TOUTIAO || MP-LARK
      // nvue下，高度使用js计算填充
      style.height = this.$uv.addUnit(this.$uv.sys()?.safeAreaInsets?.bottom, 'px')
      // #endif
      return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
    },
  },
  mounted() {
    // #ifdef APP-NVUE
    // 标识为是否nvue
    this.isNvue = true
    // #endif
  },
}
</script>

<style lang="scss" scoped>
.uv-safe-bottom {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
}
/* #ifndef APP-NVUE */
// 历遍生成4个方向的底部安全区
@each $d in top, right, bottom, left {
  .uv-safe-area-inset-#{$d} {
    padding-#{$d}: 0;
    padding-#{$d}: constant(safe-area-inset-#{$d});
    padding-#{$d}: env(safe-area-inset-#{$d});
  }
}
/* #endif */
</style>
